import { useEffect, useRef, useState } from 'react';

export default function WhyNeedConcurrent() {
    const [count, setCount] = useState(0);
    const butIns = useRef(null);

    useEffect(() => {
        // 500ms后触发setCount
        setTimeout(() => {
            setCount(1);
        }, 500);

        // 同时500ms模拟用户点击按钮
        setTimeout(() => {
            (butIns.current as any).click();
        }, 500);
    }, [])

    const handleButtonClick = () => {
        setCount(count => count + 2)
    }

    return (
        <div>
            <button ref={butIns} onClick={handleButtonClick}>增加2</button>
            <div>
                {Array.from(new Array(8000)).map((v, index) =>
                    <span key={index}>{count}</span>
                )}
            </div>
        </div>
    )
}